/*
 * @Author: lusx 
 * @Date: 2020-04-30 17:02:03 
 * @Last Modified by: lusx
 * @Last Modified time: 2020-05-02 21:27:18
 */
import React from 'react';
import { observer, inject } from 'mobx-react';
import { Accordion, List, Icon, } from 'weaver-mobile';
import { toJS } from 'mobx';
import AccordionWraps from './accordionWraps';
import OtherDom from './otherDom';
import IconDom from './iconDom';

@inject('createProjectStore')
@observer
export default class Item extends React.Component {
    render(){
        const { datas, isFuzzy, searchPage, datasM, getActionSetting } = this.props.createProjectStore;
        const {match,location} = this.props;
        let data;
        let wftypes = [];
        if (isFuzzy) {
            if (toJS(searchPage.searchValue) === "") {
                data = datas;
            } else {
                data = datasM;
            }
        } else {
            data = datas;
        }
        for (const d of toJS(data)) {
            let wfbeans = [];
            for (const wfbean of d.wfbeans) {
                wfbeans.push(
                    <List.Item key={wfbean.id}>
                        <div className='item-name' onClick={(e) => { getActionSetting(wfbean.id, 0).then(result => { result === true ? this.props.history.push({pathname:'/quickbar/add', state:{ categoryid: wfbean.id }}) : null; }) }}>
                            {wfbean.name}
                        </div>
                    </List.Item>

                );
            }
            wftypes.push(
                <Accordion.Panel
                    key={d.id}
                    showArrow={false}
                    header={<div className="judgeTest">
                        <IconDom id={d.id} />
                        {d.typename} ({wfbeans.length})
                        </div>
                    }
                >
                    <List arrow=''
                        className="my-list">
                        {wfbeans}
                    </List>
                </Accordion.Panel>
            );
        }
        if (wftypes.length > 0) {
            return <AccordionWraps >{wftypes}</AccordionWraps>;
        } else {
            return <OtherDom />
        }
    }
}
/*
const AccordionWraps = inject('createProjectStore')(observer((props) => {
    const { activeKey, changeAccordionIcon } = props.createProjectStore;
    return <Accordion
        accordion={false}
        activeKey={toJS(activeKey)}
        className="my-accordion"
        onChange={(key) => {
            changeAccordionIcon(key, "true")
        }}  >
        {props.children}
    </Accordion>
}));
const IconDom = inject('createProjectStore')(observer((props) => {
    const { createProjectStore: { dialogSwitch }, id } = props;
    return <Icon type={dialogSwitch.get(id) ? 'take-up' : 'open'} size='xxs'> </Icon>
}))
const OtherDom = inject('createProjectStore')(observer((props) => {
    const { loading } = props.createProjectStore;
    if (loading) {
        return <div></div>
    } else {
        return <NoData />
    }
}));
*/